/<template>
  <div
    v-permission:examine-watch
    class="content-outer"
  >
    <Block class="content-head">
      <BiForm>
        <BiFormItem label="短剧名称">
          <template slot="content">
            <!-- 修改 -->
            <el-select
              ref="channel"
              v-model="formData.playlet_id"
              :loading="loading"
              multiple
              collapse-tags
              filterable
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsList.playlet_id"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧类型">
          <template slot="content">
            <!-- 修改 -->
            <el-select
              ref="channel"
              v-model="formData.playlet_category"
              clearable
              :loading="loading"
              placeholder="请选择"
            >
              <!-- 修改 -->
              <el-option
                v-for="item in categoryList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="提审小程序">
          <template slot="content">
            <el-select
              ref="channel"
              v-model="formData.mini_app_id"
              multiple
              clearable
              collapse-tags
              :loading="loading"
              placeholder="请选择"
            >
              <el-option
                v-for="(item) in optionsList.mini_app_id"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                style="display: flex; align-items: center;justify-content: space-between;"
              >
                <span style="float: left">{{ item.name }}</span>
                <svg-icon
                  v-if="item.app_type==1"
                  style="float: right;"
                  icon-class="miniapp"
                  class="imageIcon"
                />
                <svg-icon
                  v-else
                  style="float: right;"
                  icon-class="douyin"
                  class="imageIcon"
                />
              </el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="短剧属性">
          <template slot="content">
            <el-select
              v-model="formData.property_type"
              clearable
            >
              <el-option
                v-for="item in propertyTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </template>
        </BiFormItem>
        <BiFormItem label="归属合同">
          <template slot="content">
            <selectPlaylet
              type="mainPlaylet"
              :reserve="false"
              :is-resize="isResize"
              :multiple="true"
              :autoreset="true"
              @result="playletSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem label="标签">
          <template slot="content">
            <selectPlaylet
              type="tag"
              :is-resize="isResize"
              :reserve="false"
              :multiple="true"
              @result="tagsSelect"
            />
          </template>
        </BiFormItem>
        <BiFormItem>
          <template slot="button">
            <el-button
              style="margin-left: 10px"
              type="primary"
              :disabled="loading"
              :loading="loading"
              @click="onSearch"
            >查询</el-button>
            <el-button @click="onReset">重置</el-button>
          </template>
        </BiFormItem>
      </BiForm>
    </Block>
    <Block>
      <div class="tabTitle">
        <el-tabs
          v-model="formData.app_type"
          class="tabs"
          @tab-click="weixinChange"
        >
          <el-tab-pane
            label="微信审核"
            name="1"
          ></el-tab-pane>
          <el-tab-pane
            label="抖音审核"
            name="2"
          ></el-tab-pane>
        </el-tabs>
      </div>
      <div class="rowFlex spaceBetween">
        <div class="subTab">
          <el-radio-group
            v-if="formData.app_type=='1'"
            v-model="formData.check_type"
            @change="activeChang"
          >
            <el-radio-button
              v-for="(item,index) in wxTabList"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio-button>
          </el-radio-group>
          <el-radio-group
            v-else
            v-model="formData.check_type"
            @change="activeChang"
          >
            <el-radio-button
              v-for="(item,index) in dytabList"
              :key="item.value"
              :label="item.value"
            >{{ item.label }}</el-radio-button>
          </el-radio-group>
        </div>
        <div class="action-box">
          <div class="left">
          </div>
          <div class="right">
            <el-button
              v-permission:examine-submit
              type="primary"
              @click="btnSubmitType"
            >提交审核</el-button>
          </div>
        </div>
      </div>
      <BiTable
        :loading="loading"
        :data="tableData"
        size="medium"
        :column="tableColums"
        fixed="sticky"
        fixed-offset="50"
        pagination
        layout="total, prev, pager, next"
        :auto-scroll="false"
        :total="page_info.total"
        :page.sync="page_info.page"
        :limit.sync="page_info.page_size"
        @pagination="handlePageChange"
      >
        <template v-slot:playlet_category="{row}">
          <div
            v-for="(item, index) in optionsList.playlet_category"
            :key="index"
          >
            <div v-if="item.value == row.playlet_category">
              {{ item.label }}
            </div>
          </div>
        </template>
        <template v-slot:tags="{ row }">
          <p
            v-for="(item,index) in row.tags"
            :key="index"
          >{{ item.tag_title }}</p>
        </template>
        <template v-slot:title="{row}">
          <div>
            <p
              class="title"
              @click="onDetail(row)"
            >{{ row.title }}</p>
            <p
              v-if="row.playlet_id"
              class="ID"
            >ID:{{ row.playlet_id }}</p>
          </div>
        </template>
        <template v-slot:check_status_title="{row}">
          <div>
            <span :class="`check_status_icon ${row.check_status == 4 ? 'success' : (row.check_status == 1 || row.check_status == 2) ? 'ongoing' : (row.check_status == 3 || row.check_status == 5) ? 'error' : '' }`"></span>
            <span
              v-if="row.check_status == 3 || row.check_status == 5"
              class="fail"
            >{{ row.check_status_title }}
              <!-- <el-popover
                placement="top-start"
                width="200"
                trigger="hover"
                :content="popoverConten"
                @show="onPopoverShow(row)"
              >
                <i
                  slot="reference"
                  class="el-icon-question"
                  style="cursor: pointer; width: 16px !important;"
                ></i>
              </el-popover> -->
            </span>
            <span v-else>{{ row.check_status_title }}</span>
          </div>
        </template>
        <template v-slot:relation_playlet="{row}">
          <div v-if="row.relation_playlet.id">
            <p>{{ row.relation_playlet.title }}</p>
            <p>ID:{{ row.relation_playlet.id }}</p>
          </div>
        </template>
        <template v-slot:status="{row}">
          <div class="colorStatus">
            <span
              v-if="row.status == 1"
              class="indeter"
            >更新中</span>
            <span
              v-if="row.status == 2"
              class="success"
            >已完结</span>
          </div>
        </template>
        <template v-slot:zip="{ row }">
          <!-- 审核状态 1提审中，2审核中，3审核驳回，4审核通过,5审核不通过 -->
          <div
            v-if="row.app_type==1 && row.check_status==3"
            v-permission:examine-submit
          >
            <el-button
              type="text"
              size="medium"
              @click="onExamine(row)"
            >重新提审</el-button>
          </div>
          <div
            v-else-if="row.app_type==2 && row.check_status != 2"
            v-permission:examine-submit
          >
            <el-button
              type="text"
              size="medium"
              @click="uploadVideo(row)"
            >重新提审</el-button>
          </div>
        </template>
      </BiTable>
    </Block>
    <BiDrawer
      v-model="drawer.visible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="SubmitReview"
      drawer-size="500px"
      @ok="onOk"
    ></BiDrawer>
    <BiDrawer
      v-model="drawer.dyvisible"
      :drawer-title="drawer.title"
      :row="drawer.row"
      :component="drawerComponent.DySubmitReview"
      drawer-size="500px"
      @ok="onOk"
    ></BiDrawer>
    <BiDrawer
      v-model="Detaildrawer.visible"
      :drawer-title="Detaildrawer.title"
      :row-info="Detaildrawer.row"
      :data="Detaildrawer.row"
      :component="drawerComponent.rowDetails"
      drawer-size="400"
      @ok="onDetailOk"
    ></BiDrawer>
    <BiDrawer
      v-model="repeatUpload"
      :drawer-title="drawerTitle"
      :row-info="playletInfo"
      :component="drawerComponent.anewExamine"
      drawer-size="400"
      @ok="onOk"
    ></BiDrawer>
  </div>
</template>

<script>
import { detail } from '@/api/content'
import { miniAppList } from '@/api/common'
import { checkFailReason } from '@/api/appContent/theater'
import SubmitReview from './component/SubmitReview.vue'
import { playletCheckList, contractPlayList } from '@/api/examine.js'
import rowDetails from '../index/component/rowDetails.vue'
import { mapState, mapActions } from 'vuex'
import DySubmitReview from './component/DySubmitReview.vue'
import anewExamine from './component/anewExamine'

export default {
  components: {},
  data() {
    return {
      SubmitReview,
      popoverConten: '',
      activeTab: '',
      oldAvtiveTab: 1,
      loading: false,
      page_info: {
        page: 1,
        page_size: 20,
        total: 0
      },
      drawerTitle: '',
      repeatUpload: false,
      playletInfo: {},
      wxTabList: [
        {
          label: '全部',
          value: '0'
        },
        {
          label: '待审核',
          value: '1'
        },
        {
          label: '审核成功',
          value: '2'
        }
      ],
      dytabList: [
        {
          label: '全部',
          value: '0'
        },
        {
          label: '未审核',
          value: '1'
        },
        {
          label: '审核中',
          value: '2'
        },
        {
          label: '审核不通过',
          value: '3'
        },
        {
          label: '审核通过',
          value: '4'
        }
      ],
      isResize: false,
      formData: {
        app_type: '1',
        playlet_id: '',
        check_type: '0',
        property_type: '',
        mini_app_id: [],
        main_playlet_id: [],
        tag_id: [],
        playlet_category: ''
      },
      // 修改
      optionsList: {
        playlet_id: [],
        mini_app_id: []
      },
      tableData: [],
      tableColums: [
        {
          label: '封面',
          prop: 'cover',
          width: 70,
          render: (h, { row }) => {
            return <el-image src={row.cover} style='width:50px;border-radius:5px;'></el-image>
          }
        },
        {
          label: '短剧信息',
          prop: 'title',
          minWidth: 200,
          slotScope: true
        },
        {
          label: '集数',
          prop: 'upload_num',
          minWidth: 80
        },
        {
          label: '提审小程序',
          prop: 'mini_app_name',
          minWidth: 120,
          render: (h, { row }) => {
            if (row.app_type == 1) {
              return (
                <div>
                  {' '}
                  {row.mini_app_name} <svg-icon icon-class='miniapp' class='imageIcon' />{' '}
                </div>
              )
            } else if (row.app_type == 2) {
              return (
                <div>
                  {' '}
                  {row.mini_app_name} <svg-icon icon-class='douyin' class='imageIcon' />{' '}
                </div>
              )
            } else {
              return <div> {row.mini_app_name} </div>
            }
          }
        },
        {
          label: '审核状态',
          prop: 'check_status_title',
          slotScope: true,
          minWidth: 130
        },
        {
          label: '短剧属性',
          prop: 'property_type',
          minWidth: 130,
          renderHeader: (h, { row }) => {
            return (
              <div>
                短剧属性
                <el-tooltip class='item' effect='dark' placement='top'>
                  <div slot='content' class='tooltipLine'>
                    <p>合同剧：短剧底层，任意短剧都会归属为某部合同剧，可过审</p>
                    <p>版本剧：只能由合同剧新建，一个合同剧可以创建若干版本剧，可修改短剧内容，可过审</p>
                    <p>马甲剧：只能由版本剧新建，只能修改名称、封面，不可修改短剧内容，引用对应版本剧内容及过审信息</p>
                  </div>
                  <i class='el-icon-question' style='margin-left:5px;'></i>
                </el-tooltip>
              </div>
            )
          },
          render: (h, { row }) => {
            if (row.property_type == 1) {
              return <span>合同剧</span>
            } else if (row.property_type == 2) {
              return <span>版本剧</span>
            } else if (row.property_type == 3) {
              return <span>马甲剧</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '标签',
          prop: 'tags',
          width: 100,
          slotScope: true
        },
        {
          label: '审核备注',
          prop: 'dy_check_fail_reason',
          minWidth: 200,
          render: (h, { row }) => {
            if (row.app_type == 1) {
              return <div> {row.check_fail_reason} </div>
            } else if (row.app_type == 2) {
              return (
                <el-popover placement='top-start' width='200' trigger='hover' content={row.dy_check_fail_reason}>
                  <div slot='reference' class='dy_check_fail_reason'>
                    {row.dy_check_fail_reason}
                  </div>
                </el-popover>
              )
            } else {
              return <div> {row.check_fail_reason} </div>
            }
          }
        },
        {
          label: '归属合同',
          prop: 'relation_playlet',
          slotScope: true,
          minWidth: 200
        },
        {
          label: '短剧类型',
          prop: 'playlet_category',
          minWidth: 120,
          render: (h, { row }) => {
            const playlet = this.categoryList.find((item) => item.value == row.playlet_category)
            if (playlet) {
              return <span>{playlet.label}</span>
            } else {
              return <span></span>
            }
          }
        },
        {
          label: '完结状态',
          prop: 'status',
          minWidth: 100,
          slotScope: true
        },
        {
          label: '操作',
          prop: 'zip',
          width: 100,
          slotScope: true
        }
      ],
      drawer: {
        visible: false,
        row: {},
        title: ''
      },
      Detaildrawer: {
        visible: false,
        dyvisible: false,
        title: '短剧详情',
        row: {}
      },
      drawerComponent: {
        rowDetails: rowDetails,
        DySubmitReview: DySubmitReview,
        anewExamine: anewExamine
      }
    }
  },
  computed: {
    ...mapState('common', ['categoryList', 'propertyTypeList', 'commonDataList']),
    params() {
      const { page, page_size, playlet_id, check_type, mini_app_id = [], playlet_category, main_playlet_id = [], property_type, tag_id, app_type } = Object.assign(this.formData, this.page_info)
      return {
        page,
        page_size,
        playlet_id,
        check_type,
        mini_app_id,
        main_playlet_id,
        tag_id,
        property_type,
        app_type,
        playlet_category
      }
    }
  },
  mounted() {
    this.onGetList()
    this.getMiniAppList()
    this.getContractPlayList()
    this.$AccessReport.report('zhangyu-content-examine', [this.$store.state.user.routerItem.name, '内容管理', '审核管理'])
  },
  methods: {
    ...mapActions('common', ['requestCommonData']),
    async onDetail(row) {
      const res = await detail({ id: row.playlet_id })
      if (res.status_code === 1) {
        const detailsInfo = res.data
        detailsInfo.id = row.playlet_id
        this.Detaildrawer.row = detailsInfo
        this.Detaildrawer.visible = true
      }
    },
    async getMiniAppList() {
      const res = await miniAppList()
      if (res.status_code === 1) {
        this.optionsList.mini_app_id = res.data
      }
    },
    async onPopoverShow(row) {
      const res = await checkFailReason({
        mini_playlet_id: row.id
      })
      if (res.status_code === 1) {
        this.popoverConten = res.data.fail_reason
      }
    },
    playletSelect(value) {
      this.formData.main_playlet_id = value
    },
    tagsSelect(value) {
      this.formData.tag_id = value
    },
    // 切换微信抖音tab
    weixinChange(value) {
      console.log(value, 'valuie')
      if (this.oldAvtiveTab == this.formData.app_type) {
        console.log('old')
        return
      } else {
        this.oldAvtiveTab = this.formData.app_type
      }
      if (this.formData.app_type == 2) {
        const numIndex = this.tableColums.findIndex((item) => item.prop === 'upload_num')
        this.tableColums.splice(numIndex, 1)
        const statusIndex = this.tableColums.findIndex((item) => item.prop === 'check_status_title')
        this.tableColums.splice(statusIndex + 1, 0, {
          label: '能力列表',
          prop: 'scope_list',
          minWidth: 130,
          render: (h, { row }) => {
            return (
              <div>
                {row.scope_list &&
                  row.scope_list.split(',').map((item) => {
                    console.log(item, '--------------------------------')
                    return <div>{item}</div>
                  })}
              </div>
            )
          }
        })
        this.tableColums.splice(
          2,
          0,
          {
            label: '提审集数',
            prop: 'dy_seq_num',
            minWidth: 80
          },
          {
            label: '短剧提审ID',
            prop: 'album_id',
            minWidth: 100
          }
        )
      } else {
        const idIndex = this.tableColums.findIndex((item) => item.prop === 'album_id')
        this.tableColums.splice(idIndex, 1)
        const numIndex = this.tableColums.findIndex((item) => item.prop === 'dy_seq_num')
        this.tableColums.splice(numIndex, 1)
        const capacityIndex = this.tableColums.findIndex((item) => item.prop === 'scope_list')
        this.tableColums.splice(capacityIndex, 1)
        this.tableColums.splice(2, 0, {
          label: '集数',
          prop: 'upload_num',
          minWidth: 80
        })
      }
      this.formData.check_type = 0
      this.activeChang()
    },
    activeChang() {
      this.page_info = {
        page: 1,
        page_size: 20,
        total: 0
      }
      this.formData = {
        app_type: this.formData.app_type,
        check_type: this.formData.check_type,
        playlet_id: '',
        mini_app_id: [],
        main_playlet_id: [],
        property_type: '',
        tag_id: [],
        playlet_category: ''
      }
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
      this.onGetList()
    },
    async onGetList() {
      console.log(this.params)
      this.loading = true
      const res = await playletCheckList(this.params)
      if (res.status_code === 1) {
        this.tableData = res.data.data
        this.page_info = res.data.page_info
      }
      this.loading = false
    },
    onSearch() {
      this.page_info.page = 1
      this.onGetList()
    },
    handlePageChange(value) {
      this.page_info.page = value.page
      this.onGetList()
    },
    onReset() {
      this.formData = {
        playlet_id: '',
        app_type: '1',
        check_type: '0',
        mini_app_id: [],
        main_playlet_id: [],
        property_type: '',
        tag_id: [],
        playlet_category: ''
      }
      this.isResize = true
      setTimeout(() => {
        this.isResize = false
      }, 200)
    },
    btnSubmitType() {
      if (this.formData.app_type == 1) {
        this.onExamine()
      } else {
        this.dyOnExamine()
      }
    },
    onExamine(row) {
      this.drawer = {
        visible: true,
        row: row && row.id ? row : {},
        title: '提交审核 - 微信'
      }
    },
    // 重新提审
    // onExamineSubmit(row) {
    //   if (row.app_type == 1) { // 微信
    //     this.onExamine(row)
    //   } else if (row.app_type == 2) { // 抖音
    //     this.uploadVideo(row)
    //   } else {

    //   }
    // },
    uploadVideo(row) {
      this.$router.push(`${this.$route.path}`)
      this.drawerTitle = '提交审核 - 抖音'
      detail({ playlet_audit_id: row.id, id: row.playlet_id }).then((res) => {
        if (res.status_code === 1) {
          const detailsInfo = res.data
          detailsInfo.id = row.id
          detailsInfo.playlet_id = row.playlet_id
          detailsInfo.mini_app_id = row.mini_app_id
          this.playletInfo = detailsInfo
          this.repeatUpload = true
        }
      })
    },
    dyOnExamine(row) {
      this.drawer = {
        dyvisible: true,
        row: row && row?.id ? row : {},
        title: '提交审核 - 抖音'
      }
    },
    async getContractPlayList() {
      const res = await contractPlayList()
      if (res.status_code === 1) {
        this.optionsList.playlet_id = res.data
      }
    },
    onOk() {
      this.onGetList()
    },
    onDetailOk() {}
  }
}
</script>
<style lang="scss">
.relation_playletlist:hover {
  background-color: #f1fcf6;
}
.check_status_icon.error {
  background-color: #f73f3e;
}
.check_status_icon.ongoing {
  background-color: #faad4f;
}
.check_status_icon.success {
  background-color: #06c261;
}
.check_status_icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #b3b3b3;
  border-radius: 50%;
  margin: 0 5px;
}
.ID {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
}
.title {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #06c261;
  line-height: 20px;
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.action-box {
  margin-bottom: 14px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
::v-deep .dy_check_fail_reason {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
